<template>
  <div>
    <h1>Parent:{{count}}</h1>

    <div>
      <h2>原始的父子组件数据双向绑定</h2>
      <Child :count="count" @update:count="count = $event"/>
    </div>

    <div>
       <!-- 
        .sync修饰符帮我们在当前的子组件上绑定了一个名字叫update:XXX的自定义事件

        .sync和v-model进行父子组件之间数据双向绑定的用法和区别（主要是约定层面上的）
          - 用法
            - v-model主要用在子组件是表单元素上
            - .sync 主要用在非表单元素上
          - 区别：
            - v-model在组件上一般只能使用一次，.sync可以在组件上传递多个值
            - v-model本质传递的props名称固定是value,而.sync传递的props名称是自定义的
            - v-model本质绑定的自定义事件名称是input事件,而.sync给子组件绑定的自定义事件名称是update:XXX
       -->
      <h1>2.使用.sync修饰符 进行父子组件双向绑定</h1>
      <Child :count.sync="count" />
    </div>
  </div>
</template>

<script>
import Child from "./Child";
export default {
  name: "Parent",
  components: {
    Child,
  },
  data() {
    return {
      count: 0
    }
  },
};
</script>

<style></style>
